<template>
	<div class="com-container">
		<div class="com-chart" ref='hot_ref'></div>
		<span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
		<span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
		<span class="cat-name" :style="comStyle">{{ catName }}</span>
	</div>
</template>

<script>
	import {getThemeValue} from '@/utils/theme_utils.js'
	export default {
		data() {
			return {
				//实例对象
				chartInstance: null,
				// 服务器返回的数据，数组格式
				resData: null,
				// 当前所展示出的一级分类数据
				currentIndex: 0,
				oneWeight: 0
			}
		},
		computed: {
			catName() {
				if (!this.resData) {
					return ''
				} else {
					return this.resData[this.currentIndex].name
				}
			},
			comStyle () {
				return {
					fontSize: this.oneWeight * 3 + 'px',
					color: getThemeValue(this.theme).titleColor
				}
    },
			theme(){
				 return this.$store.state.theme;
			}
		},
		watch:{
			theme(){
				//销毁当前图表
				this.chartInstance.dispose();
				//重新以最新主题初始化图表
				this.initChart();
				//完成适配
				this.screenAdapter();
				//更新图表展示
				this.updataChart();			
			}
		},
		created(){
			//组件创建完成后进行回调函数的注册
			this.$socket.registerCallBack('hotData',this.getData)		
		},	
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'hotData',
				chartName: 'hot',
				value: ''
			})
			this.screenAdapter();
			window.addEventListener("resize", this.screenAdapter);
		},
		destroyed() {
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('hotData');
		},
		methods: {
			//初始化echart实例对象
			initChart() {

				this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.$store.state.theme);
				//对图表初始化配置的控制
				const initOption = {
					title: {
						text: '▎ 热销商品的占比',
						left: 20,
						top: 20
					},
					legend: {
						top: '12%',
						icon: 'circle'
					},
					tooltip: {
						show: true,
						formatter: arg => {
							// console.log(arg)
							const thirdCategory = arg.data.children
							// 计算出所有三级分类的数值总和
							let total = 0
							thirdCategory.forEach(item => {
								total += item.value
							})
							let retStr = ''
							thirdCategory.forEach(item => {
								retStr += `
								${item.name}:${parseInt(item.value / total * 100) + '%'}
								<br/>
								`
							})
							return retStr
						}
					},
					series: [{
						type: 'pie'
					}]
				};
				this.chartInstance.setOption(initOption);
				// this.chartInstance.on('mouseover', () => {
				// 	clearInterval(this.timerId);
				// })
				// this.chartInstance.on('mouseout', () => {
				// 	this.startInterval();
				// })
			},
			//获取服务器数据
			getData(ret) {
				// this.$axios.get('hot').then(res => {
				// 	console.log(res.data);
				// 	this.resData = res.data;
				// 	//对数据从小到大排序
				// 	// this.resData.sort((a, b) => b.value - a.value);
				// 	//获取总页数
				// 	this.updataChart();
				// 	// console.log(this.currentPage)
				// })
					this.resData = ret;
					this.updataChart();
			},
			//更新图表			
			updataChart() {
				const legendData = this.resData[this.currentIndex].children.map(item => {
					return item.name;
				})
				const seriesData = this.resData[this.currentIndex].children.map(item => {
					return {
						name: item.name,
						value: item.value,
						children: item.children
					}
				})
				const dataOption = {
					legend: {
						data: legendData
					},

					series: [{
						data: seriesData
					}]
				}
				this.chartInstance.setOption(dataOption);
			},
			//echarts实例屏幕的适配
			screenAdapter() {
				this.oneWeight = this.$refs.hot_ref.offsetWidth / 100;
				//跟屏幕大小有关的配置
				const adapterOption = {
					title: {
						textStyle: {
							fontSize: this.oneWeight * 4
						}
					},
					legend: {
						itemWidth: this.oneWeight * 4,
						itemHeight: this.oneWeight * 4,
						itemGap: this.oneWeight * 2.5,
						textStyle: {
							fontSize: this.oneWeight * 2.5
						}
					},
					series: [{
						radius: this.oneWeight * 18,
						center: ['50%', '60%']
					}]
				};
				this.chartInstance.setOption(adapterOption);
				this.chartInstance.resize();

			},
			toLeft() {
				this.currentIndex--;
				if (this.currentIndex < 0) {
					this.currentIndex = this.resData.length - 1;
				}
				this.updataChart();
				// console.log(this.currentIndex)
			},
			toRight() {
				this.currentIndex++;
				if (this.currentIndex > this.resData.length - 1) {
					this.currentIndex = 0;
				}
				this.updataChart();
				// console.log(this.currentIndex);

			}

		}
	}
</script>


<style scoped>
	.arr-left {
		position: absolute;
		left: 10%;
		top: 60%;
		transform: translateY(-50%);
		cursor: pointer;
		color: white;
		font-size: 20px;
	}

	.arr-right {
		position: absolute;
		right: 10%;
		top: 60%;
		transform: translateY(-50%);
		cursor: pointer;
		color: white;
	}

	.cat-name {
		position: absolute;
		left: 80%;
		bottom: 25px;
		color: white;
	}
</style>
